<script lang="ts" setup>
const LocalStorageKey = 'HISTORY_KEY'
import SearchHistory from '@/views/Search/components/SearchHistory.vue'
import SearchGuess from '@/views/Search/components/SearchGuess.vue'
import HotSearch from '@/views/Search/components/HotSearch.vue'
import { ref } from 'vue'
import { showToast } from 'vant'
import router from '@/router'
import type { HotSearchType } from '@/types/Search'
const guessList = ref<string[]>(['快乐小土豆', 'Dear John', 'Sparks Fly'])
const inpTxt = ref<string>('')
const isSearch = ref<boolean>(false)
const active = ref(0)
const historyList = ref(
  localStorage.getItem(LocalStorageKey) ? [...localStorage.getItem(LocalStorageKey)!.split(',')] : []
)
const onSearch = (input: string) => {
  const inputStr = input.trim()
  if (!inputStr) {
    showToast('请输入文字')
    return
  }

  isSearch.value = true
  const locatStr = localStorage.getItem(LocalStorageKey)
  if (!locatStr) {
    localStorage.setItem(LocalStorageKey, input)
  }
  else {
    const array = [...localStorage.getItem(LocalStorageKey)!.split(',')]
    const newArr = array.filter((item) => {
      return item !== input
    })
    newArr.unshift(input)
    localStorage.setItem(LocalStorageKey, newArr.join(','))
  }

  historyList.value = [
    ...localStorage.getItem(LocalStorageKey)!.split(',')
  ]
  //inpTxt.value = ''
}
const onDelete = () => {
  localStorage.removeItem(LocalStorageKey)
  historyList.value = []
}

const onClear = () => {
  if (guessList.value.includes('快乐小土豆')) {
    guessList.value = ['爱丫爱丫(live)', '沈园外(DJ版)', 'TEETH']
  }
  else {
    guessList.value = ['快乐小土豆', 'Dear John', 'Sparks Fly']
  }
}
const hotList = ref<HotSearchType[]>([
  { id: 1, title: '偷心', flag: '热' },
  { id: 2, title: '孤独的船', flag: null },
  { id: 3, title: '我期待的不是雪', flag: null },
  { id: 4, title: '姑娘别哭泣', flag: '新' },
  { id: 5, title: '奢香姑娘', flag: null },
  { id: 6, title: '瞬', flag: null },
  { id: 7, title: '悬溺', flag: null },
  { id: 8, title: '你往前走不要回头', flag: null },
  { id: 9, title: '林俊杰', flag: null },
  { id: 10, title: '邓紫棋', flag: null },
  { id: 11, title: '凤凰传奇', flag: null },
  { id: 12, title: '最好的安排', flag: null },
  { id: 13, title: '遇见陕西版', flag: null },
  { id: 14, title: '我还想他', flag: null },
  { id: 15, title: 'Back Seat', flag: null },
  { id: 16, title: '无名的人', flag: null },
  { id: 17, title: '出现又离开', flag: null },
  { id: 18, title: '天下', flag: null },
  { id: 19, title: '有形的翅膀', flag: null },
  { id: 20, title: '句号', flag: null },
])

const onCellClick = (item: HotSearchType) => {
  console.log(item)
}
const onClickHistory = (item: string) => {
  console.log(item)
}
const onClickHot = (item: string) => {
  console.log(item)
}

const onNewSong = () => {
  console.log('点击了新歌')
}
</script>
<template>
  
  <van-sticky>
    <form action="/">
      <van-search class="custom-search" background="transparent" v-model="inpTxt" show-action placeholder="请输入搜索关键词"
        @search="onSearch" @cancel="router.go(-1)" />
    </form>
  </van-sticky>

  <!-- 未搜索之前 -->
  <div v-if="!isSearch">
    <SearchHistory :history="historyList" @on-delete="onDelete" @on-click-history="onClickHistory" />
    <SearchGuess :guess="guessList" @on-clear="onClear" @on-click-guess="onClickHot" />
    <div class="new-song" @click="onNewSong">
      <span class="new-song-title">新歌发送</span>
    </div>
    <HotSearch :hotList="hotList" @did-click-cell="onCellClick" />
  </div>

  <div v-else>
    <van-tabs v-model:active="active" swipeable>
      <van-tab v-for="index in 4" :title="'选项 ' + index" :key="index">
      内容 {{ index }}
    </van-tab>
</van-tabs>

  </div>
</template>

<style lang="scss" scoped>
::v-deep .van-search__content {
  background: #303030;
  border-radius: 4vw;
  height: 8vw;
}

.custom-search {
  margin-top: 6vw;
}

::v-deep .van-search__action {
  color: #fff;
  background-color: transparent;
  font-size: 4vw;
}

::v-deep .van-search__field .van-field__left-icon {
  background-color: transparent;
}

::v-deep .van-field__left-icon .van-icon,
.van-field__right-icon .van-icon {
  color: #fff;
  background-color: transparent;
  font-size: 6vw;
}

::v-deep .van-field__control {
  background-color: #303030;
  font-size: 4vw;
  color: #fff;
}

.new-song {
  margin: auto;
  width: 94vw;
  height: 26vw;
  background-color: transparent;
  background-image: url('https://img1.baidu.com/it/u=4213344068,80804733&fm=253&fmt=auto&app=138&f=JPEG?w=1080&h=432');
  background-size: cover;
  border-radius: 2vw;
}

.new-song-title {
  display: inline-block;
  background-color: #606060;
  color: #fff;
  font-size: 3vw;
  line-height: 3vw;
  height: 6vw;
  padding: 1.5vw 3vw;
  text-align: center;
  border-radius: 0 1vw 1vw 0;
  opacity: 0.8;
}
</style>